<template>
	<view class="mainLayout">
		<view class="journalBox" v-if="journalList.length !== 0">
			<journal-item v-if="!showAllJournal" />
			<all-item v-else />
		</view>
		<view class="empty" v-else>
			<view>还没有日记哦~</view>
			<view> 点击 <text class="text">右下角</text> +开始写日记把~ </view>
		</view>
		<view class="addButton" @click="goto" hover-class="hoverBtn"> + </view>
	</view>
</template>

<script>
import { mapActions, mapState } from "vuex";
import AllItem from './allItem.vue';
import journalItem from './journalItem.vue';
export default {
  components: { journalItem, AllItem },
	data() {
		return {
			showAllJournal:false
		};
	},
	methods: {
		...mapActions("journalStore", ["getjournalListAction" , "getAllJournalAction"]),
		goto(){
			uni.$u.route('/pages_second/addJournal/addJournal');
		},
		init(){
			uni.$on('getAllJournal', async (data)=>{
				if(data){
					this.showAllJournal = data.type
					this.pageOption.user_id = this.userInfo.id
					await this.getAllJournalAction()
				}
			})
		}
	},
	onUnload(){
		uni.$off()
	},
    created() {
		this.getjournalListAction();
		this.init()
	},
	watch: {
		journalList(newVal, oldVal) {
		
		},
	},
	computed: {
		...mapState("journalStore", ["journalList" ,"pageOption"]),
		...mapState("userStore", ["userInfo"]),
	},
};
</script>

<style lang="scss" scoped>
.addButton {
	position: fixed;
	bottom: 60rpx;
	right: 60rpx;
	width: 96rpx;
	height: 96rpx;
	text-align: center;
	line-height: 96rpx;
	font-size: 48rpx;
	border-radius: 50%;
	font-weight: 600;
	color: #000;
	background: #ff5987;
}

.journalBox {
	padding: 32rpx;
	border-radius: 50rpx;
	transform: translateY(-30px);
	background: #fbfbfb;
}
.empty{
	color: #299b49;
    font-size: 28rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 40vh;
    font-weight: 500;

	.text{
		    padding: 0 16rpx;
    color: #e63f31;

	}
}
</style>
